Redux 核心

他是一個非常小的library

• createStore :創建一個redux store
• combineReducers :組合多個 slice reducers成一個更大的reducer
• applyMiddleware :組合多個middleware 成一個store enhancer
• compose :組合多個store enhancers 成一個store enhancer

太多store enhancer 來一下他的名詞解釋吧

store enhancer 是個 higher-order function，它組合 store creator 以回傳一個新的、強化的 store creator。這與 middleware 類似，它也讓你可以用組合的方式改變 store 的介面。

Store enhancers 跟 React 的 higher-order component 是大致相同的概念，後者偶爾也被稱為「component enhancer」。

名詞解釋資料來源:https://chentsulin.github.io/redux/docs/Glossary.html

也因為他的library很小

所以應用程序中所有其他與 Redux 相關的邏輯都必須完全自己編寫。

優點是表示著 Redux可以以多種不同的方式使用。缺點是沒有幫助程序可以使代碼更易於編寫。
所以redux toolkit就是來改善這種情況的(以後會介紹到)

我下面就偷懶一下
用之前練習saga的code demo吧，等saga的筆記整理好說不定又會看到這一模一樣的code??

// reducers.js

export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    case 'INCREMENT_IF_ODD':
      return state % 2 !== 0 ? state + 1 : state;
    default:
      return state;
  }
}

// main.js

import '@babel/polyfill';

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';

import reducer from './reducers';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));

const action = (type) => store.dispatch({ type });

function render() {
  ReactDOM.render(
    <>
        <p>redux only</p>
        <button onClick={() => action('INCREMENT')}>Increment</button>
        <button style={{ margin: '0 10px' }} onClick={() => action('INCREMENT')}>
          Decrement
        </button>
        <button onClick={() => action('INCREMENT_IF_ODD')}>Add If Odd</button>
        <div>Clicked: {store.getState()} times</div>
    </>,
    document.getElementById('root'),
  );
}

render();
store.subscribe(render);

明日待續:
你真的需要redux嗎-利用react hook來實現redux